<template>
  <view class="my-container mo-container">
    <!-- 用户信息头部 -->
    <view class="user-header uni-pa-7 animate__animated animate__fadeIn">
      <!-- 背景底纹 -->
      <view class="header-pattern">
        <cover-image
          :src="url('ib1', '', 'jpg')"
          mode="repeat"
        ></cover-image>
      </view>

      <!-- 用户信息内容 -->
      <view class="user-info">
        <view class="avatar-wrapper" @tap="openEditDrawer">
          <image
            :src="userInfo.avatar"
            mode="aspectFill"
            class="avatar"
            alt="icon"
            title="icon"
          ></image>
          <view class="edit-avatar">
            <text class="bi bi-camera"></text>
          </view>
        </view>
        <view class="user-detail uni-ml-6">
          <text class="username">{{ userInfo.user_name }}</text>
          <view class="user-desc">
            <text class="bi bi-geo-alt"></text> {{ displayLocation }}
          </view>
          <text class="user-bio"> 💎用户积分 {{ displayScore }}</text>
        </view>
        <view class="edit-btn" @tap="openEditDrawer">
          <text class="bi bi-pencil"></text> 编辑资料
        </view>
      </view>

      <!-- 用户数据统计 -->
      <view class="user-stats animate__animated animate__fadeInUp uni-my-6">
        <view class="stat-item">
          <text class="stat-num">12</text>
          <text class="stat-label">收藏</text>
        </view>
        <view class="stat-item">
          <text class="stat-num">25</text>
          <text class="stat-label">点赞</text>
        </view>
        <view class="stat-item">
          <text class="stat-num">8</text>
          <text class="stat-label">订单</text>
        </view>
      </view>
    </view>
    <!-- 会员卡部分 -->
    <uni-card class="member-card" @click="goToRecharge">
      <view class="member-card-content uni-pa-5">
        <view class="card-header">
          <view class="card-title">
            <text class="bi bi-credit-card-2-front"></text> 墨枢黑金会员
          </view>
          <view class="card-chip">
        <text class="bi bi-bank2"></text>
         
          </view>
        </view>
        <view class="card-body">
          <view class="card-number">
            <text>NO.{{ userInfo.card || '未登录' }}</text>
          </view>
          <view class="card-balance">
            <text class="balance-label">余额</text>
            <text class="balance-amount">￥{{ formatBalance }}</text>
          </view>
        </view>
      </view>
    </uni-card>
    <!-- 地址部分 -->
    <uni-card class="order-card" v-if="addressStore.addresses.length">
      <view class="d-flex justify-content-between">
        <view> <text class="bi bi-geo-alt"></text> 默认收货地址 </view>
        <view>
          <view @tap="goToAddress">
            管理地址<text class="bi bi-chevron-right"></text>
          </view>
        </view>
      </view>
      <view class="uni-my-5">
        <view class="">
          <text class=""
            >{{ defaultAddress?.name }}{{ defaultAddress?.phone }}</text
          >
        </view>
        <text class="text-secondary">
          {{ defaultAddress?.province }}
          {{ defaultAddress?.city }}
          {{ defaultAddress?.district }}
          {{ defaultAddress?.detail }}
        </text>
      </view>
    </uni-card>
    <!-- 订单卡片 -->
    <uni-card class="card">
      <view class="d-flex justify-content-between">
        <text><text class="bi bi-bag"></text> 我的订单</text>
        <navigator url="/pages/my/order-types/all" hover-class="none">
          <text class="more"
            >查看全部 <text class="bi bi-chevron-right"></text
          ></text>
        </navigator>
      </view>
      <view class="d-flex justify-content-around uni-my-6">
        <navigator
          v-for="type in orderTypes"
          :key="type.value"
          :url="type.url"
          hover-class="none"
          class="type-item"
        >
          <view class="me-2">
            <text class="uni-error fs-4" :class="['bi', type.icon]"></text>
            <uni-badge
              v-if="type.badge"
              :text="type.badge"
              :offset="[20, -10]"
              size="small"
              type="error"
            />
          </view>
          <view>
            <text class="text-center">{{ type.label }}</text>
          </view>
        </navigator>
      </view>
    </uni-card>

    <!-- 功能列表 -->
    <uni-card class="card">
      <view>
        <text><text class="bi bi-grid"></text> 我的服务</text>
      </view>

      <uni-grid :column="4" :highlight="true" :showBorder="false">
        <uni-grid-item
          v-for="item in functionList"
          class="d-flex uni-my-4 justify-content-center align-items-center"
          :key="item.id"
        >
          <view
            class="d-flex justify-content-center align-items-center flex-column"
            @tap="navigateTo(item.url)"
          >
            <view class="uni-my-2"
              ><text
                :class="['bi', item.icon]"
                class="uni-error fs-6 text-center"
              ></text>
            </view>
            <view
              ><text class="">{{ item.label }}</text>
            </view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-card>

    <view class="uni-my-6">
      <button
        class="bg-primary-new text-white  uni-radius-lg uni-mx-4"
      
        @tap="handleLogout"
      >
        退出登录
      </button>
    </view>
    <!-- <view class="text-secondary uni-my-8 text-center">
      <text class="tips-text"
        ><text class="bi bi-infinity"></text
        >联动多端|H5网页|小程序|APP|IOS|鸿蒙</text
      >
    </view> -->
    <view class="text-secondary uni-my-8 text-center">
      <!-- H5 网页 -->
      <!-- #ifdef H5 -->
      <!-- <view class="h5-view">
        <text><text class="bi bi-filetype-html"></text>当前为 H5 网页</text>
      </view> -->
      <!-- #endif -->
      <!-- 微信小程序 -->
      <!-- #ifdef MP-WEIXIN -->
      <view class="mp-weixin-view">
        <text> <text class="bi bi-wechat"></text>当前为微信小程序</text>
      </view>
      <!-- #endif -->
      <!-- iOS 平台 -->
      <!-- #ifdef APP-IOS -->
      <view class="ios-view">
        <text><text class="bi bi-apple"></text>当前为 iOS 平台</text>
      </view>
      <!-- #endif -->
      <!-- Android 平台 -->
      <!-- #ifdef APP-ANDROID -->
      <view class="android-view">
        <text><text class="bi bi-android"></text>当前为 Android 平台</text>
      </view>
      <!-- #endif -->
      <!-- 鸿蒙平台 -->
      <!-- #ifdef HARMONY -->
      <view class="harmony-view">
        <text><text class="bi bi-flower1"></text>当前为鸿蒙平台</text>
      </view>
      <!-- #endif -->
    </view>
    <uni-popup
      ref="popup"
      type="right"
      background-color="#fff"
      @change="onPopupChange"
    >
      <view class="edit-drawer uni-pa-6">
        <view class="d-flex justify-content-between">
          <view><text class="drawer-title">编辑个人资料</text></view>
          <view><text class="bi bi-x" @tap="closeEditDrawer"></text></view>
        </view>

        <view class="edit-form">
          <!-- 头像选择 -->
          <view class="avatar-selector">
            <text class="">选择头像</text>
            <view class="avatar-grid">
              <view
                v-for="avatar in avatarOptions"
                :key="avatar"
                class="avatar-option"
                :class="{ active: editForm.avatar === avatar }"
                @tap="selectAvatar(avatar)"
              >
                <cover-image :src="avatar" mode="aspectFill"></cover-image>
              </view>
            </view>
          </view>

          <!-- 基本信息表单 -->
          <view class="uni-my-6">
            <text class="form-label">用户名</text>
            <view class="input-group">
              <input
                type="text"
                v-model="editForm.username"
                placeholder="请输入用户名"
                class="form-input"
                @blur="updateUsername"
              />
              <text v-if="editForm.username !== userInfo.user_name" class="input-changed">已修改</text>
            </view>
          </view>

          <view class="uni-my-6">
            <text class="form-label">地区</text>
            <view class="input-group">
              <input
                type="text"
                v-model="editForm.location"
                placeholder="请输入所在地"
                class="form-input"
                @blur="updateLocation"
              />
              <text v-if="editForm.location !== userInfo.location" class="input-changed">已修改</text>
            </view>
          </view>

          <view class="uni-my-6">
            <text class="form-label">个性签名</text>
            <view class="input-group">
              <textarea
                v-model="editForm.introduction"
                placeholder="介绍一下自己吧"
                class="form-textarea"
                @blur="updateIntroduction"
              />
              <text v-if="editForm.introduction !== userInfo.introduction" class="input-changed">已修改</text>
            </view>
          </view>
        </view>

        <view class="d-flex uni-gap-2">
          <button class="w-100 uni-radius-lg" type="" @tap="closeEditDrawer" :disabled="updateStatus.isUpdating">
            取消
          </button>
          <button class="w-100 uni-radius-lg" type="warn" @tap="saveUserInfo" :disabled="updateStatus.isUpdating">
            {{ updateStatus.isUpdating ? '保存中...' : '保存' }}
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from "vue";
import { useUserStore } from "@/stores/userStore";
import { useCartStore } from "@/stores/cartStore";
import { useAddressStore } from "@/stores/address";
import { useCounterStore } from "@/stores/counter";

const url = $url;
const userStore = useUserStore();
const cartStore = useCartStore();
const addressStore = useAddressStore();
const stores = useCounterStore();
// 使用计算属性获取用户信息
const userInfo = computed(() => userStore.userInfo);
const popup = ref(null);

// 更新状态跟踪
const updateStatus = reactive({
  isUpdating: false,
  lastUpdateTime: 0
});

// 防抖函数
const debounce = (fn, delay = 500) => {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

// 节流函数
const throttle = (fn, delay = 1000) => {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) return;
    lastCall = now;
    return fn.apply(this, args);
  };
};

// 编辑表单数据
const editForm = ref({
  avatar: "",
  username: "",
  location: "",
  introduction: "",
  // 添加其他可能需要编辑的字段
});

// 头像选项
const avatarOptions = stores.avatarOptions;

const orderTypes = ref([
  {
    label: "待付款",
    value: "pending",
    icon: "bi-wallet2",
    url: "/pages/my/order-types/pending",
    badge: "0"
  },
  {
    label: "待发货",
    value: "unpaid",
    icon: "bi-box-seam",
    url: "/pages/my/order-types/unpaid",
    badge: "0"
  },
  {
    label: "待收货",
    value: "shipping",
    icon: "bi-truck",
    url: "/pages/my/order-types/shipping",
    badge: "0"
  },
  {
    label: "待评价",
    value: "review",
    icon: "bi-chat-dots",
    url: "/pages/my/order-types/review",
    badge: "0"
  }
]);

const functionList = [
  {
    id: 1,
    label: "我的收藏",
    icon: "bi-heart",
    url: "/pages/my/favorites",
  },
  {
    id: 2,
    label: "收货地址",
    icon: "bi-geo-alt",
    url: "/pages/my/address",
  },
  {
    id: 3,
    label: "消息通知",
    icon: "bi-bell",
    url: "/pages/my/notifications",
  },
  {
    id: 4,
    label: "优惠券",
    icon: "bi-ticket-perforated",
    url: "/pages/my/coupons",
  },
  {
    id: 5,
    label: "浏览历史",
    icon: "bi-clock-history",
    url: "/pages/my/history",
  },
  {
    id: 6,
    label: "意见反馈",
    icon: "bi-chat-dots",
    url: "/pages/my/feedback",
  },
  {
    id: 7,
    label: "设置",
    icon: "bi-gear",
    url: "/pages/my/settings",
  },
  {
    id: 8,
    label: "帮助",
    icon: "bi-bookmark-heart",
    url: "/pages/my/help",
  },
];

const settingsList = [
  {
    id: 1,
    label: "账户安全",
    icon: "bi-lock",
    url: "/pages/my/settings",
  },
  {
    id: 2,
    label: "支付设置",
    icon: "bi-credit-card",
    url: "/pages/my/settings",
  },
  {
    id: 3,
    label: "隐私设置",
    icon: "bi-eye-slash",
    url: "/pages/my/settings",
  },
  {
    id: 4,
    label: "通知设置",
    icon: "bi-bell",
    url: "/pages/my/settings",
  },
];

// 获取各状态订单数量
const fetchOrderCounts = async () => {
  if (!userStore.isLoggedIn || !userStore.userInfo || !userStore.userInfo.account) {
    return;
  }

  try {
    // 获取所有状态的订单数量
    const statuses = ['pending', 'paid', 'shipping', 'review'];
    const counts = await Promise.all(
      statuses.map(async (status) => {
        const result = await uniCloud.callFunction({
          name: 'orderManage',
          data: {
            body: JSON.stringify({
              action: 'getByStatus',
              account: userStore.userInfo.account,
              status: status
            })
          }
        });
        
        if (result.result && result.result.status === 1) {
          return result.result.data.length;
        }
        return 0;
      })
    );

    // 更新订单类型中的数量
    orderTypes.value = orderTypes.value.map((type, index) => ({
      ...type,
      badge: counts[index].toString()
    }));
  } catch (error) {
    console.error('获取订单数量失败:', error);
  }
};

// 在组件挂载时获取订单数量
onMounted(async () => {
  // 确保从store读取最新数据
  userStore.initStore();
  
  if (userStore.isLoggedIn && userStore.userInfo && userStore.userInfo.account) {
    console.log("用户已登录，信息:", userStore.userInfo);
    // 获取订单数量
    await fetchOrderCounts();
  } else {
    console.log("用户未登录或信息不完整，使用默认信息");
    // 如果未登录，使用默认信息
    const defaultUserInfo = {
      account: "13800138000",
      avatar: "https://epoch.jxksd.top/mo/images/tx4.png",
      birthday: "2025-03-24",
      create_time: 1742824320850,
      default: true,
      email: "13800138000@163.com",
      gender: "保密",
      introduction: "这个人很懒，还没有介绍~",
      location: "江西省南昌市",
      password: "123456",
      role: 1,
      score: 100,
      user_name: "傩舞游客1380"
    };
    
    // 直接设置临时数据，但不改变登录状态
    userStore.setTempUserInfo(defaultUserInfo);
  }
});

// 打开编辑抽屉
const openEditDrawer = () => {
  // 确保表单字段与用户信息一致，使用正确的字段名
  editForm.value = {
    avatar: userInfo.value.avatar || "", 
    username: userInfo.value.user_name || "", // 明确使用user_name字段
    location: userInfo.value.location || "",
    introduction: userInfo.value.introduction || "",
  };
  
  // 添加调试日志，检查初始化的表单数据
  console.log("初始化表单数据:", editForm.value);
  console.log("当前用户信息:", userInfo.value);
  
  popup.value.open();
};

// 关闭编辑抽屉
const closeEditDrawer = () => {
  popup.value.close();
};

// 使用节流的选择头像函数，实现单项修改
const selectAvatar = throttle(async (avatar) => {
  if (!avatar) return;
  
  // 显示加载中
  uni.showLoading({
    title: "更新头像中...",
    mask: true
  });
  
  try {
    // 直接提交头像更新，实现单项修改
    const success = await updateUserInfoWithCloud({ avatar });
    
    if (success) {
      // 更新本地表单数据
      editForm.value.avatar = avatar;
      
      uni.showToast({
        title: "头像已更新",
        icon: "success",
        duration: 1500
      });
    }
  } catch (error) {
    console.error("更新头像失败:", error);
    uni.showToast({
      title: "头像更新失败",
      icon: "error"
    });
  } finally {
    uni.hideLoading();
  }
}, 800);

// 使用云函数更新用户信息
const updateUserInfoWithCloud = async (updateData) => {
  // 防止重复提交
  if (updateStatus.isUpdating) {
    uni.showToast({
      title: "请勿频繁操作",
      icon: "none"
    });
    return false;
  }
  
  // 检查是否未登录
  if (!userStore.isLoggedIn) {
    console.log("用户未登录，无法更新信息");
    uni.showToast({
      title: "请先登录后再操作",
      icon: "none"
    });
    
    // 提示用户登录
    setTimeout(() => {
      uni.navigateTo({
        url: "/pages/other/login"
      });
    }, 1500);
    
    return false;
  }
  
  // 确保用户已登录且有账号信息
  if (!userInfo.value || !userInfo.value.account) {
    console.error("更新失败: 用户账号信息缺失", userInfo.value);
    uni.showToast({
      title: "用户信息异常，请重新登录",
      icon: "none"
    });
    return false;
  }
  
  try {
    updateStatus.isUpdating = true;
    
    // 显示加载状态
    uni.showLoading({
      title: "保存中...",
      mask: true
    });
    
    // 构建请求数据，确保包含账号信息
    const requestData = {
      account: userInfo.value.account,
      ...updateData
    };
    
    console.log("更新数据:", requestData);
    
    // 调用云函数更新用户信息
    const result = await uniCloud.callFunction({
      name: "updateUserInfo",
      data: {
        body: JSON.stringify(requestData)
      }
    });
    
    uni.hideLoading();
    
    if (result.result && result.result.status === 1) {
      // 更新本地store中的用户信息
      userStore.setUserInfo(result.result.data);
      
      uni.showToast({
        title: "保存成功",
        icon: "success"
      });
      return true;
    } else {
      const errorMsg = result.result?.message || "保存失败";
      console.error("更新失败:", errorMsg, result);
      uni.showToast({
        title: errorMsg,
        icon: "error"
      });
      return false;
    }
  } catch (error) {
    uni.hideLoading();
    console.error("更新用户信息失败:", error);
    uni.showToast({
      title: "网络错误，请重试",
      icon: "error"
    });
    return false;
  } finally {
    // 延迟重置状态，防止用户立即再次点击
    setTimeout(() => {
      updateStatus.isUpdating = false;
    }, 1000);
    updateStatus.lastUpdateTime = Date.now();
  }
};

// 单项修改用户名 - 修复版本
const updateUsername = debounce(async () => {
  // 为空检查
  if (!editForm.value.username || editForm.value.username.trim() === '') {
    uni.showToast({
      title: "用户名不能为空",
      icon: "none"
    });
    // 恢复原值
    editForm.value.username = userInfo.value.user_name || '';
    return;
  }
  
  // 未变更检查
  if (editForm.value.username === userInfo.value.user_name) {
    return; // 未变更，不提交
  }
  
  console.log("更新用户名:", {
    原用户名: userInfo.value.user_name,
    新用户名: editForm.value.username,
    账号: userInfo.value.account
  });
  
  // 调用更新函数
  const success = await updateUserInfoWithCloud({ 
    user_name: editForm.value.username 
  });
  
  // 如果失败，恢复原值
  if (!success) {
    editForm.value.username = userInfo.value.user_name || '';
  }
}, 800);

// 单项修改地区
const updateLocation = debounce(async () => {
  if (editForm.value.location === userInfo.value.location) {
    return; // 未变更，不提交
  }
  
  await updateUserInfoWithCloud({ 
    location: editForm.value.location 
  });
}, 800);

// 单项修改简介
const updateIntroduction = debounce(async () => {
  if (editForm.value.introduction === userInfo.value.introduction) {
    return; // 未变更，不提交
  }
  
  await updateUserInfoWithCloud({ 
    introduction: editForm.value.introduction 
  });
}, 800);

// 保存用户信息 - 使用防抖
const saveUserInfo = debounce(async () => {
  // 验证表单字段
  if (!editForm.value.username || editForm.value.username.trim() === '') {
    uni.showToast({
      title: "用户名不能为空",
      icon: "none"
    });
    return;
  }
  
  // 检查是否有变更，避免无效请求
  const hasChanges = 
    editForm.value.avatar !== userInfo.value.avatar ||
    editForm.value.username !== userInfo.value.user_name ||
    editForm.value.location !== userInfo.value.location ||
    editForm.value.introduction !== userInfo.value.introduction;
  
  if (!hasChanges) {
    uni.showToast({
      title: "未检测到修改",
      icon: "none"
    });
    closeEditDrawer();
    return;
  }
  
  // 构建更新数据对象
  const updateData = {};
  
  // 只包含已修改的字段，减少传输数据量
  if (editForm.value.avatar !== userInfo.value.avatar) {
    updateData.avatar = editForm.value.avatar;
  }
  
  if (editForm.value.username !== userInfo.value.user_name) {
    updateData.user_name = editForm.value.username;
  }
  
  if (editForm.value.location !== userInfo.value.location) {
    updateData.location = editForm.value.location;
  }
  
  if (editForm.value.introduction !== userInfo.value.introduction) {
    updateData.introduction = editForm.value.introduction;
  }
  
  // 打印更新数据，调试用
  console.log("提交更新数据:", updateData);
  
  // 使用云函数更新信息
  const success = await updateUserInfoWithCloud(updateData);
  
  if (success) {
    closeEditDrawer();
    // 刷新页面数据
    if (userStore.userInfo) {
      console.log("更新后的用户信息:", userStore.userInfo);
    }
  }
}, 500);

// 退出登录确认
const handleLogout = () => {
  // 检查是否已登录
  if (!userStore.isLoggedIn) {
    uni.showToast({
      title: "您尚未登录",
      icon: "none"
    });
    
    setTimeout(() => {
      uni.navigateTo({
        url: "/pages/other/login"
      });
    }, 1000);
    
    return;
  }

  uni.showModal({
    title: "提示",
    content: "确定要退出登录吗？",
    success: async (res) => {
      if (res.confirm) {
        try {
          // 清除用户信息
          await userStore.clearUserInfo();

          // 清除本地存储
          uni.removeStorageSync("userInfo");

          // 显示提示
          uni.showToast({
            title: "已退出登录",
            icon: "success",
            duration: 1500,
          });

          // 等待提示显示完成后再跳转
          setTimeout(() => {
            // 使用 reLaunch 而不是 navigateTo，确保清除页面栈
            uni.reLaunch({
              url: "/pages/other/login",
              success: () => {
                console.log("跳转到登录页面成功");
              },
              fail: (err) => {
                console.error("跳转失败:", err);
              },
            });
          }, 1500);
        } catch (error) {
          console.error("退出登录失败:", error);
          uni.showToast({
            title: "退出失败，请重试",
            icon: "error",
          });
        }
      }
    },
  });
};

// 抽屉状态变化回调
const onPopupChange = (e) => {
  console.log("popup change:", e);
};

// 显示用户信息的计算属性
const displayBio = computed(
  () => userInfo.value.introduction || "这个人很懒，还没有介绍~"
);
const displayLocation = computed(() => userInfo.value.location || "未设置地区");

// 获取默认地址
const defaultAddress = computed(() => {
  return addressStore.addresses[0] || null;
});

// 跳转到地址管理页面
const goToAddress = () => {
  uni.navigateTo({
    url: "/pages/my/address",
  });
};

// 修改 functionList 的跳转方法
const navigateTo = (url) => {
  // 检查 url 是否存在
  if (!url) {
    uni.showToast({
      title: "功能开发中",
      icon: "none",
    });
    return;
  }

  // 使用 uni.navigateTo 进行跳转
  uni.navigateTo({
    url: url,
    fail: (err) => {
      console.error("导航失败:", err);
      uni.showToast({
        title: "页面跳转失败",
        icon: "none",
      });
    },
  });
};

// 积分显示计算属性
const displayScore = computed(() => {
  // 优先使用score字段，如果不存在则尝试使用core字段
  const score = userInfo.value.score || userInfo.value.core || 0;
  // 添加千位分隔符
  return score.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});

// 格式化余额显示
const formatBalance = computed(() => {
  const balance = userInfo.value.balance || 0;
  // 确保balance是数字并保留两位小数
  const formattedNumber = Number(balance).toFixed(2);
  // 添加千位分隔符
  return formattedNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});

// 跳转到充值页面
const goToRecharge = () => {
  uni.navigateTo({
    url: '/pages/user/recharge',
    fail: (err) => {
      console.error('跳转失败:', err);
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      });
    }
  });
};
</script>

<style scoped>
.my-container {
  min-height: 100vh;

  padding-bottom: 120rpx;
}

.user-header {
  background: linear-gradient(135deg, var(--td-brand-color) 0%, hsl(181, 38%, 60%) 100%);

  color: #fff;
  position: relative;
  overflow: hidden;
}

.header-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  pointer-events: none;

  .pattern-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.user-info {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.avatar-wrapper {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.edit-avatar {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 100%;
  height: 100%;
}

.user-detail {
  flex: 1;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
}

.user-desc {
  font-size: 24rpx;
  opacity: 0.8;
}

.user-stats {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-around;

  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-num {
  font-size: 36rpx;
  font-weight: bold;
}

.stat-label {
  font-size: 24rpx;
  opacity: 0.8;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-types {
  display: flex;
  justify-content: space-around;
}

.icon-wrapper {
  position: relative;
  display: inline-block;
}

.edit-drawer {
  width: 600rpx;
  height: 100vh;
  background: #fff;
  position: relative;
}

.drawer-title {
  font-size: 32rpx;
  font-weight: bold;
}

.section-title {
  font-size: 28rpx;
  color: #333;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.avatar-option {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 4rpx solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;

  &.active {
    border-color: var(--td-brand-color);
    transform: scale(1.05);
  }

  &:hover {
    opacity: 0.8;
    transform: scale(1.05);
  }

  image {
    width: 100%;
    height: 100%;
  }
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.form-textarea {
  width: 100%;
  height: 120rpx;

  border: 1px solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
  border-top: 2rpx solid #f5f5f5;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.setting-icon {
  font-size: 48rpx;
}

.right {
  display: flex;
  align-items: center;
}

.badge {
  background: var(--td-brand-color);
  color: #fff;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
}

.btn-logout {
  border-radius: 40rpx;
  color: #e74c3c;
  border: 2rpx solid #e74c3c;
  background: #fff;
  font-size: 28rpx;
}

.input-group {
  position: relative;
  width: 100%;
}

.input-changed {
  position: absolute;
  right: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24rpx;
  color: var(--td-brand-color);
  background: rgba(223, 76, 80, 0.1);
  padding: 2rpx 10rpx;
  border-radius: 20rpx;
}

.member-card {

  background: linear-gradient(135deg, #141E30 0%, #243B55 100%);
  border-radius: 20rpx;
  overflow: hidden;
  color: #fff;
  position: relative;
  box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.2);
}

.member-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(255,223,0,0.05) 100%);
  pointer-events: none;
}

.member-card::after {
  content: '';
  position: absolute;
  top: -150%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

.member-card-content {

  position: relative;
  z-index: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid rgba(255,215,0,0.2);
  padding-bottom: 20rpx;
}

.card-title {
  font-size: 22rpx;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.card-chip {
  font-size: 22rpx;
  color: #FFD700;
  opacity: 0.9;
  filter: drop-shadow(0 2rpx 4rpx rgba(0,0,0,0.3));
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.card-number {
  font-size: 36rpx;
  letter-spacing: 4rpx;
  font-family: monospace;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
  background: linear-gradient(90deg, #FFD700 0%, #FFF8DC 50%, #FFD700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s infinite linear;
}

.card-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  background: rgba(255,255,255,0.1);
  padding: 20rpx;
  border-radius: 10rpx;
  backdrop-filter: blur(5rpx);
}

.balance-label {
  font-size: 28rpx;
  color: rgba(255,255,255,0.8);
}

.balance-amount {
  font-size: 44rpx;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

@keyframes shine {
  0% {
    transform: translateX(-200%) rotate(45deg);
  }
  100% {
    transform: translateX(200%) rotate(45deg);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
</style>
